
<div style="width: 100%; height: 400px;" class="fluent-wizard" position="left" b-l81u9o5gjc="">
  <ol b-l81u9o5gjc="">
    <li status="current" style="height: 100%;" b-a5o5s1yurv="">
      <div class="fluent-wizard-icon" b-a5o5s1yurv="">
        <svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="2">
          <path d="M2 12a10 10 0 1120 0 10 10 0 01-20 0z"></path>
        </svg>
      </div>
      <div hidden-when="xs" b-a5o5s1yurv="">
        <p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp="">Step1</p>
        <p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp="">Summary 1</p>
      </div>
    </li>
    <li status="next" style="height: 100%;" b-a5o5s1yurv="">
      <div class="fluent-wizard-icon" b-a5o5s1yurv="">
        <svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="3">
          <path d="M12 3.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zM2 12a10 10 0 1120 0 10 10 0 01-20 0z"></path>
        </svg>
      </div>
      <div hidden-when="xs" b-a5o5s1yurv="">
        <p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp="">Step2</p>
        <p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp="">Summary 2</p>
      </div>
    </li>
    <li status="next" style="height: 100%;" b-a5o5s1yurv="">
      <div class="fluent-wizard-icon" b-a5o5s1yurv="">
        <svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="4">
          <path d="M12 3.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zM2 12a10 10 0 1120 0 10 10 0 01-20 0z"></path>
        </svg>
      </div>
      <div hidden-when="xs" b-a5o5s1yurv="">
        <p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp="">Step3</p>
        <p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp="">Summary 3</p>
      </div>
    </li>
  </ol>
  <div class="fluent-wizard-content" b-l81u9o5gjc="">
    <div style="" b-l81u9o5gjc="">
      Content 1
    </div>
  </div>
  <div class="fluent-wizard-buttons" b-l81u9o5gjc="">
    <span style="margin-right: 10px" b-l81u9o5gjc=""></span>
    <fluent-button style="width: 80px;;" type="button" appearance="accent" blazor:onclick="5" b-x1200685t0="" blazor:elementreference="xxx">Next</fluent-button>
  </div>
</div>